<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #warp {
            width: 230px;
            height: 360px;
            border: 1px solid #eeeeee;
            margin: 8px;
        }

        a {
            display: block;
            font: 11px/40px "微软雅黑";
            text-decoration: none;
            color: #595959;
            padding-left: 50px;
        }

        #icon01 {
            background: url("imges/icon_01.png") no-repeat 13px, center;
        }

        #icon02 {
            background: url("imges/icon_02.png") no-repeat 11px, center;
        }

        #icon03 {
            background: url("imges/icon_03.png") no-repeat 12px, center;
        }

        #icon04 {
            background: url("imges/icon_04.png") no-repeat 11px, center;
        }

        #icon05 {
            background: url("imges/icon_05.png") no-repeat 11px, center;
        }

        #icon06 {
            background: url("imges/icon_06.png") no-repeat 11px, center;
        }

        #icon07 {
            background: url("imges/icon_07.png") no-repeat 11px, center;
        }

        #icon08 {
            background: url("imges/icon_08.png") no-repeat 11px, center;
        }

        #icon09 {
            background: url("imges/icon_09.png") no-repeat 11px, center;
        }

        a:hover {
            color: red;
            background: url("imges/icon_10.png") no-repeat 219px, center;
        }

        a {
            background: url("imges/icon_10.png") no-repeat 207px, center;
        }
    </style>

</head>
<body>
<!--
作业1：
	1、标签要语义化
	2、鼠标放到每一行上，字体颜色要变，同时后面的箭头要往后走（用background结合hover搞定）
	3、每一行都是链接
-->
<div id="warp">
    <div id="icon01"><a href="#">百度周边</a></div>
    <div id="icon02"><a href="#">数码产品</a></div>
    <div id="icon03"><a href="#">生活家居</a></div>
    <div id="icon04"><a href="#">图书杂志</a></div>
    <div id="icon05"><a href="#">办公文具</a></div>
    <div id="icon06"><a href="#">运动户外</a></div>
    <div id="icon07"><a href="#">电子卡卷</a></div>
    <div id="icon08"><a href="#">特权道具</a></div>
    <div id="icon09"><a href="#">活动专区</a></div>
</div>
</body>
</html>